<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<base href="<%=request.getContextPath() %>\">
<link rel="stylesheet" type="text/css" href="css/gouwuches.css" />
  <script type="text/javascript"  src="js/jquery-2.2.3.min.js"></script>
		  <script type="text/javascript">

			  

$(function(){
	$.ajax({
		type:"post",
		url:"gwc",
		data:"v=jiazai",
		success:function(msg){
			
				 var arr=$.parseJSON(msg)
				 console.log(arr);	
				 adddata(arr)
				 checkbian();
				//复选框操作
					checkchange();
					//批量删除操作
					alldel();
					//单个删除操作
					del();
					//数量修改操作
					countzc();
					//添加插件

					//确定下单
					tianjia();
					//复选
					 fuxuan(); 
					//数量
					 shuliang()
		}
	})
	


	
})


//动态加载数据
function adddata(arrs){

	console.log(arrs+"423")
	var bigdiv=$(".bigbox");
	
	arrs.forEach((v,i)=>{
		var $spbox=$("<div>");
		bigdiv.append($spbox);
		$spbox.addClass("spbox");
		
		
		
		var $spbox_good=$("<div>");
		$spbox.append($spbox_good);
		$spbox_good.addClass("spbox_good");
		
		var $good_item=$("<div>");
		$spbox_good.append($good_item);
		$good_item.addClass("good_item").addClass("left");
			var $good_item_input=$("<div>");
			$good_item.append($good_item_input);
			$good_item_input.addClass("good_item_input");
				var $input=$("<input type='checkbox' sid='"+v.sid+"'>" );
				$good_item_input.append($input);
				if(v.isselect==0){
					$input.attr("checked","checked");
					console.log(v.sid)
				}
				
		var $good_jianjie=$("<div>");
		$spbox_good.append($good_jianjie);
		$good_jianjie.addClass("good_jianjie").addClass("left");
			var $good_jianjie_img=$("<div>");
			$good_jianjie.append($good_jianjie_img);
			$good_jianjie_img.addClass("good_jianjie_img").addClass("left");
				var $good_jianjie_img_a=$("<a href=''>");
				$good_jianjie_img.append($good_jianjie_img_a);
					var $jianjie_img=$("<img>");
					$good_jianjie_img_a.append($jianjie_img);
					$jianjie_img.attr("src",v.pho_img);
			var	$good_jianjie_name=$("<div>");
			$good_jianjie.append($good_jianjie_name);
			$good_jianjie_name.addClass("good_jianjie_name").addClass("left");
				var $name_a=$("<a href>");
				$good_jianjie_name.append($name_a);
				$name_a.html(v.cname);
				var $name_div=$("<div>");
				$good_jianjie_name.append($name_div);
					var $name_div_span=$("<span>");
					$name_div.append($name_div_span);
					
					var stt="";
					v.list.forEach(function(v,i){						
						if(i>0){
							stt=stt+"  "+"+"+"  "+v.atvname;
						}else{
							stt=stt+v.atvname;
						}
					})
					$name_div_span.html(stt)
					
					
					
		var $good_price=$("<div>");
		$spbox_good.append($good_price);
		$good_price.addClass("good_price").addClass("left");
			var $price_p=$("<p>");
			$good_price.append($price_p);
				var $price_p_span=$("<span>");
				$price_p.append($price_p_span);
				$price_p_span.html("￥");
					$price_p_span_span=$("<span>");
					$price_p_span.append($price_p_span_span);
					$price_p_span_span.html(v.sprice);
		
		var $good_count=$("<div>");
		$spbox_good.append($good_count);
		$good_count.addClass("good_count").addClass("left");		
			var $good_count_div=$("<div>");
			$good_count.append($good_count_div);
			var shuliangkuang=$("<input type='text'/>").val(v.sccount);
			var jianimgs=$("<span><img src='imgs/lingimgs/jian.png' /></span>");
			var jiaimgs=$("<span><img src='imgs/lingimgs/jia.png' /></span>");
			$good_count_div.append(jianimgs);
			$good_count_div.append(shuliangkuang);
			$good_count_div.append(jiaimgs);
			jisuan();
			var hidd=$("<font type='hidden'>").val(v.scount);
			hidd.addClass("kucun");
			$good_count_div.append(hidd);
		var $good_xiaoji=$("<div>");
		$spbox_good.append($good_xiaoji);
		$good_xiaoji.addClass("good_xiaoji");
		$good_xiaoji.html("<p><span>￥<span>"+v.sprice+"</span></span></p>");
		
		var $good_cz=$("<div>");
		$spbox_good.append($good_cz);
		$good_cz.addClass("good_cz").addClass("left")
		$good_cz.html('<div><a href="javascript:void(0);" class="del" value='+v.ushoppincatid+'>删除</a></div>');
	})
	
}
//统计价格
function jisuan(){
	var $inputs=$(".good_count div input");
	var $spans=$(".good_price p span span");
	var $xiaoji=$(".good_xiaoji p span span");
	//计算小计
	$inputs.each((i,v)=>{

		var xiaoji=($(v).val()*$($spans[i]).html())+"";
		var j=xiaoji.indexOf(".");
		
		if(j!=-1){
			$($xiaoji[i]).html(xiaoji.substring(0,j+3));
		}else{
			$($xiaoji[i]).html(xiaoji);
		}
	})
	
	//计算总价格
	var price=$(".weibu_zje_price");
	var heji=$(".weibu_heji_t_top .jia span");
	var shuliang=$(".weibu_heji_t_down .jia span");
	var sum=0.00;
	var dancheks=$(".bigbox :checkbox");
	
	dancheks.each((i,v)=>{
		if(v.checked){
			sum=sum+parseFloat($(v).parent().parent().next().next().next().next().children().children().children().html());
		}
	})
	price.html(sum);
	heji.html(sum);
}
//复选框改变时操作
function checkchange(){
	var quancheks=$("#zhuti :checkbox");
	
	quancheks.each((i,v)=>{
		$(v).change(checkbian);
		//全选复选框事件
		if(i==0||i==quancheks.length-1){
			$(v).change(function(){
				if(this.checked){
					quancheks.each((i,v)=>{
						v.checked=true;
					})
				}else{
					quancheks.each((i,v)=>{
						v.checked=false;
					})
				}
				checkbian();
			})
		}
	})
}
//复选框
function fuxuan() {
	var quancheks=$("#zhuti :checkbox");	
	quancheks.click(function(){	
		$(".spbox :checkbox").each(function(i,v){
			var	sid=$(v).attr("sid");
			var isselect=0;		
			if(v.checked){
				isselect=0;
			}else{
				isselect=1;
			}
		
			$.ajax({
				type:"post",
				url:"gwc",
				data:"v=fuxuan&sid="+sid+"&isselect="+isselect,
				success:function(msg){
					if(msg.res){
						sfkong();
						jisuan();
					}
				}
			})
		})
	})
}
//复选框变换时的效果
function checkbian(){
		var quancheks=$("#zhuti :checkbox");
		var xiadan=$(".weibu_xiadan button");
		var open=false;
		quancheks.each((i,v)=>{
			if(v.checked){
				open=true;
			}
		})
		if(open){
			xiadan.css({"background":"rgb(180, 160, 120)","border":"1px solid rgb(180, 160, 120)"})
		}else{
			xiadan.css({"background":"#ccc","border":"1px solid #ccc"})
		}
		jisuan();
}
//批量删除
function alldel(){
	var $alldel=$(".weibu_left a:first");
	$alldel.click(function(){
		$(".spbox :checkbox").each(function(i,v){
			if(v.checked){
				var	ushoppincatid=$(v).parent().parent().next().next().next().next().next().find('a').attr("value");	//获得购物车主键id
				$.ajax({
				type:"post",
				url:"gwc",
				data:"v=shanchu&ushoppincatid="+ushoppincatid,
				success:function(msg){
					if(msg.res){
						window.location.href="gwc";
						
					}
				
				}
			})			
			}

		})
		
		sfkong();
		jisuan();
	})
	
}
//单个删除
function del(){
	$(".del").each((i,v)=>{
		$(v).click(function(){ 
			var ushoppincatid=$(this).attr("value");
			console.log(ushoppincatid);
			$.ajax({
				type:"post",
				url:"gwc",
				data:"v=shanchu&ushoppincatid="+ushoppincatid,
				success:function(msg){
					if(msg.res){
						window.location.href="gwc";
						
					}
				}
			})
			
		})
	})
	sfkong();
	jisuan();
}
//数量的监听事件
function shuliang() {
	var inputs=$(".good_count div input");
	var jians=$(".good_count div").find("span:first");
	var jias=$(".good_count div").find("span:last");
	
	
	//文本框监听
	var count=0;
	inputs.each((i,v)=>{
		$(v).on('input propertychange',function(){
			count=$(this).val();
			var ushoppincatid=$(this).parent().parent().next().next().find("a").attr("value");
			$.ajax({
				type:"post",
				url:"gwc",
				data:"v=shuliang&count="+count+"&ushoppincatid="+ushoppincatid,
				success:function(msg){
					if(msg.res){
					}
				}
			})
		})
	})
	
	//减号事件	
		$(jians).click(function(){
			count= $(this).next().val();
			var ushoppincatid=$(this).parent().parent().next().next().find("a").attr("value");
			$.ajax({
				type:"post",
				url:"gwc",
				data:"v=shuliang&count="+count+"&ushoppincatid="+ushoppincatid,
				success:function(msg){
					if(msg.res){
					}
				}
			})
		})	
		$(jias).click(function(){
			count= $(this).prev().val();
			var ushoppincatid=$(this).parent().parent().next().next().find("a").attr("value");
			$.ajax({
				type:"post",
				url:"gwc",
				data:"v=shuliang&count="+count+"&ushoppincatid="+ushoppincatid,
				success:function(msg){
					if(msg.res){
					}
				}
			})
		})

	
}
//input数量操作
function countzc(){
	var inputs=$(".good_count div input");
	var jians=$(".good_count div").find("span:first");
	var jias=$(".good_count div").find("span:last");
	inputs.each((i,v)=>{
		$(v).on("input",function(){
			var kucun=$(".good_count div").find(".kucun").val();
			var s=parseInt(kucun); 
			$(this).val($(this).val().replace(/[^\d]/g,""));
			if($(this).val()>s){
				$(this).val(s);
			}
			if($(this).val()==""||$(this).val()==0){
				$(this).val("1");
			}
			if($(this).val()==1){
				$(jians[i]).addClass("chacha")
			}
		
			$(this).parent().parent().parent().children("div:first").children().children().attr("checked","true");
			jisuan();
		})
	})
	jians.each((i,v)=>{
		
		$(v).click(function(){
			$(inputs[i]).val()
			
			if($(inputs[i]).val()==2){		
				console.log($(inputs[i]).val())
				$(jians[i]).addClass("chacha");
			}
			if($(inputs[i]).val()==1){
				return;
			}
			
			$(inputs[i]).val($(inputs[i]).val()-1)
			jisuan();
		})
	})
	jias.each((i,v)=>{
		var kucun=$(".good_count div").find(".kucun").val();
		var s=parseInt(kucun); 
		$(v).click(function(){
			if($(inputs[i]).val()>=100){
				return;
			}
			if($(inputs[i]).val()<s){
				$(jians[i]).removeClass("chacha");
				$(inputs[i]).val(parseInt($(inputs[i]).val())+1)
			}
			
			jisuan();
		})
	})
}
//判断是否全部被删除了
function sfkong(){
	
	if($(".spbox_good").length==0){
		console.log($("#kong"),$("#zhuti"));
		$("#kong").css("display","block");
		$("#zhuti").css("display","none");
	}
}
function tianjia(){
	var count=inputs=$(".good_count div input");
	var jishu=0;
	var sid="";
	var sccount="";
	$(".weibu_xiadan").click(function(){
		var dancheks=$(".bigbox :checkbox");
		dancheks.each(function(i,v){
				if(v.checked){		
					jishu++;
		 			var vv=v;
		 				if(i==dancheks.length-1){
		 					sid=sid+$(vv).attr("sid");//获得对应商品的sid
		 					sccount=sccount+$(vv).parent().parent().next().next().next().find('input').val();		//获取数量
		 				}else{
		 					sid=sid+$(vv).attr("sid")+",";//获得对应商品的sid
			 				sccount=sccount+$(vv).parent().parent().next().next().next().find('input').val()+",";		//获取数量
		 				}

				}
				console.log(sccount);
	
		})
		if(jishu==0){
			return false;
		}else{
		  window.location.href="jiesuan?&sid="+sid+"&sccount="+sccount; 
		}
	})
	
}	  
			  
		  </script>


</head>
<body>
	
		<div class="my-header">
				<jsp:include page="include/header.jsp"></jsp:include>
		
		</div>
		<div id="box">
			<div class="cont">
				<h1>购物车</h1>
				<span>Shopping Cart</span>
			</div>
			<div id="zhuti">
	
				<div id="tou">
					<div class="left xuan">
						<div class="w_check">
							<input type="checkbox">
							<span class="all">全选</span>
						</div>
					</div>
					<div class="left spxx">商品信息</div>
					<div class="left spdj">单价</div>
					<div class="left spcunt">数量</div>
					<div class="left spxiaoji">小计</div>
					<div class="left spcaozuo">操作</div>
				</div>
				<div class="bigbox">
				</div>
			<div id="weibu">
				<div class="weibu_left left">
					<input type="checkbox" />
					<span class="weibu_qx">全选</span>
					<a href="javascript:void(0);" class="weibu_del">批量删除</a>
					<a href="javascript:void(0);" class="weibu_del">清空失效商品</a>
				</div>
				<div class="weibu_xiadan right">
					<a><button>下单</button></a>
				</div>
				<div class="weibu_zje right">
					<div class="weibu_zje_qian">
						<span class="weibu_zje_yf">应付总额：</span>
						<span class="weibu_zje_jg">￥<span class="weibu_zje_price">0.00</span></span>
					</div>
				</div>
				<div class="weibu_heji right">
					<div class="weibu_heji_t">
						<div class="weibu_heji_t_top">
							<span class="top_lable1">商品合计:&nbsp;&nbsp;</span>
							<span class="jia">￥<span>0.00</span></span>
						</div>
						<div class="weibu_heji_t_down">
							<span class="down_lable1">已优惠:&nbsp;&nbsp;</span>
							<span class="jia">-￥<span>0.00</span></span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="kong">
			<div id="kong_img">
				<img src="imgs/lingimgs/gouwuce.png" >
			</div>
			<p>购物车还是空滴</p>
			<div id="ann">
				<span>登陆</span>
				<a href="">继续逛</a>
			</div>
		</div>
		</div>
		<div class="my-footer">
		<jsp:include page="include/footer.jsp"></jsp:include>
		</div>
	</body>
</html>